$contentBg: #374056;

#app.custome-theme-dark {

  background: $contentBg;

  $navbarHeight: 100px;

  .navbar {
    background: #374056;
    height: $navbarHeight;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 2px;
      background: #333A4E;
    }

    #hamburger-container {
      line-height: $navbarHeight;

      >svg {
        width: 32px;
        height: 32px;
        color: #fff;
        fill: #fff;
      }
    }

    .right-menu {
      line-height: $navbarHeight;

      .avatar-wrapper {
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin-top: 0;
      }

      .user-avatar {
        width: 50px;
        height: 50px;
      }

      .el-icon-caret-bottom {
        right: -25px;
        top: 35px;
        font-size: 24px;
        color: #fff;
      }
    }
  }


  $baseWidth: 280px;
  $scaleWidth: 0;
  $sidebarBg: #333A4E;

  .hideSidebar .sidebar-container {
    width: $scaleWidth !important;
  }

  .hideSidebar .main-container {
    margin-left: $scaleWidth;
  }

  .sidebar-container {
    width: $baseWidth !important;
    background: $sidebarBg !important;
    box-shadow: unset;

    .sidebar-logo-container {
      background: $sidebarBg !important;
      height: $navbarHeight;
      line-height: $navbarHeight;
    }

    .el-menu {
      background: $sidebarBg !important;

      .el-submenu .el-submenu__title {
        background: $sidebarBg !important;
      }

      .el-menu-item {
        background: $sidebarBg !important;
        border-radius: 25px 0 0 25px;

        &.is-active,
        &:hover {
          background: $contentBg !important;
        }
      }
    }
  }

  .main-container {
    margin-left: $baseWidth;
    border-radius: 20px 0px 0px 20px;

    .app-main {
      min-height: calc(100vh - #{$navbarHeight});
    }
  }


  // 排除登录页面
  >div:not(.login) {

    $inputHeight: 38px;

    .el-dialog__body{
      .el-form > .el-form-item:last-child .el-form-item__content{
        justify-content: flex-start;
      }
    }

    // 组件样式修改
    .el-form {
      &.multiple-from {
        min-height: 136px;
        border-radius: 68px;
        display: flex;
        flex-wrap: wrap;
      }

      min-height: 78px;
      background: #333A4E;
      border-radius: 39px;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding: 0px 20px 10px 0px;

      &::after {
        position: absolute;
        top: 0;
        left: 0;
      }

      &>.el-form-item {
        margin-bottom: 0;
        margin-top: 10px;

        &:last-child {
          flex-grow: 1;
          margin-right: 0;

          .el-form-item__content {
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-end;
          }
        }

        height: $inputHeight;

        .el-form-item__label {
          width: 100px !important;
          height: $inputHeight;
          line-height: $inputHeight;
          color: #fff;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    // input
    .el-select>.el-input {
      width: 188px;
    }

    .el-input>input {
      width: 188px;
      height: $inputHeight;
      background: #444F64;
      border-radius: 19px;
      border: none;
      color: #fff;
      padding-top: 0;
      padding-bottom: 0;
    }

    // 时间
    .el-range-editor {
      width: 288px;
      height: $inputHeight;
      background: #444F64;
      border-radius: 19px;
      border: none;
      color: #fff;
      padding-top: 0;
      padding-bottom: 0;

      >input {
        background: #444F64;
      }

      .el-range-separator {
        color: #fff;
        line-height: $inputHeight;
        margin: 0 10px;
      }
    }


    // 按钮
    .el-button:not(.el-button--text) {
      min-width: 101px;
      height: $inputHeight;
      background: linear-gradient(90deg, #00BBF6 0%, #0075D1 100%);
      border-radius: 19px;
      border: none;
      color: #fff;


      &.unactive {
        background: #444F64 !important;
      }

      &.is-disabled {
        opacity: 0.2;
      }

      >i {
        font-size: 18px;
        vertical-align: middle;
      }

      >span {
        vertical-align: middle;
      }
    }

    // 表格
    .el-table {
      margin-top: 10px;
      color: #ccc;
      $tableRowHeight: 20px;

      &::before {
        display: none;
      }

      .el-table__header {
        background-color: $contentBg;
      }

      .el-table__header-wrapper thead tr {
        background-color: #444F64;

        th {
          background-color: #444F64;
          border: none;
          color: #fff;
          height: $tableRowHeight;

          &:first-child {
            border-radius: 36px 0 0 36px;
          }

          &:last-child {
            border-radius: 0 36px 36px 0;
          }
        }
      }


      .el-table__body {
        background-color: $contentBg;

        .el-table__row {
          background-color: $contentBg;
          height: $tableRowHeight;

          >td:first-child {
            border-radius: 36px 0 0 36px;
          }

          >td:last-child {
            border-radius: 0 36px 36px 0;
          }

          &.el-table__row--striped {
            // background: #444F64;
            // background: #374056;

            >td.el-table__cell {
              background: #374056;
            }

            &:hover>td.el-table__cell{
              background-color: #444F64 !important;
            }
          }
        }

        tr:hover>td.el-table__cell {
          background-color: #444F64;
        }

        td.el-table__cell {
          border: none;
        }
      }

      .el-table__empty-block {
        background-color: $contentBg;
      }


    }

    .el-pagination__sizes .el-input>input {
      width: 96px;
      height: 30px;
      background: #444F64;
      border-radius: 2px;
    }

    .el-pagination__jump .el-input>input {
      width: 44px;
      height: 30px;
      background: #444F64;
      border-radius: 2px;
    }

    // loading
    .el-loading-mask {
      background-color: rgba($contentBg, .2);
    }

    // tree
    .el-tree {
      background-color: $contentBg;
      color: #fff;

      .el-tree-node {
        margin: 2px 0;
      }

      .el-tree-node.is-current,
      .el-tree-node:focus,
      .el-tree-node:hover {
        &>.el-tree-node__content {
          background-color: #444F64 !important;
          border-radius: 13px;
        }
      }
    }
  }

  .el-date-editor .el-range-input{
    color: #ffffff;
  }


}



// popper
.el-popper {
  background-color: $contentBg;
  border-color: $contentBg;

  .el-select-dropdown__item {
    &.hover {
      background-color: #444F64;
    }

    color: #fff;
  }
  .el-autocomplete-suggestion__list{
    li{
      color: #fff;
    }
  }
  .popper__arrow {
    border-bottom-color: $contentBg !important;

    &::after {
      border-bottom-color: $contentBg !important;
    }
  }

  .el-date-table td.in-range div {
    background-color: #444F64;
  }
}

// dialog
.el-dialog {
  background-color: $contentBg;

  .el-dialog__title {
    color: #fff;
  }


  $inputHeight: 38px;

  // 组件样式修改
  .el-form {
    &::after {
      position: absolute;
      top: 0;
      left: 0;
    }

    .el-form-item {
      // height: $inputHeight;

      .el-form-item__label {
        width: 100px !important;
        height: $inputHeight;
        line-height: $inputHeight;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .el-form-item__content {
        margin-left: 100px !important;
      }
    }
  }

  // input
  .el-select>.el-input {
    width: 168px;
  }

  .el-input>input {
    width: 168px;
    height: $inputHeight;
    background: #444F64 !important;
    border-radius: 19px;
    border: none;
    color: #fff;
    padding-top: 0;
    padding-bottom: 0;
  }

  // 时间
  .el-range-editor {
    width: 288px;
    height: $inputHeight;
    background: #444F64;
    border-radius: 19px;
    border: none;
    color: #fff;
    padding-top: 0;
    padding-bottom: 0;

    >input {
      background: #444F64;
    }

    .el-range-separator {
      color: #fff;
      line-height: $inputHeight;
      margin: 0 10px;
    }
  }


  // 按钮
  .el-button:not(.el-button--text) {
    min-width: 101px;
    height: $inputHeight;
    background: linear-gradient(90deg, #00BBF6 0%, #0075D1 100%);
    border-radius: 19px;
    border: none;
    color: #fff;

    &.is-disabled {
      opacity: 0.2;
    }

    >i {
      font-size: 18px;
      vertical-align: middle;
    }

    >span {
      vertical-align: middle;
    }
  }
}

// 去除input类型为number时后面的调控按钮
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}

//设备详情中的列表样式
.el-dialog {
  .el-table__body-wrapper {
    height: 300px !important;
    background-color: #374056;
  }
}

